<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-upload2"
      size="mini"
      @click="handleImport"
      style="margin-bottom: 20px"
    >
      导入
    </el-button>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="序号" align="center" type="index" />
      <el-table-column label="操作人" align="center" prop="createBy" />
      <el-table-column label="图纸总数" align="center" prop="picCount" />
      <el-table-column label="操作日期" align="center" prop="createTime" />
      <el-table-column label="状态" align="center" prop="">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 2 ? 'success' : 'info'">
            {{ scope.row.status == 2 ? "成功" : "暂存" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDetail(scope.row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="导入详情"
      :visible.sync="detailShow"
      width="1080px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        :model="detailParams"
        ref="detailForm"
        size="small"
        inline
        label-width="40px"
        @submit.native.prevent
      >
        <el-form-item label="楼层" prop="floor">
          <el-select v-model="detailParams.floor" placeholder="请选择楼层" clearable>
            <el-option
              v-for="i in floorList"
              :key="i.floor"
              :label="i.floor"
              :value="i.floor"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="detailList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="楼宇" align="center" prop="buildingName" />
        <el-table-column label="楼层" align="center" prop="buildingFloor.floor" />
        <el-table-column label="设备名称" align="center" prop="systemDevice.aiName" />
        <el-table-column label="数量" align="center" prop="buildingFloor.count" />
      </el-table>
      <pagination
        v-show="detailTotal > 0"
        :total="detailTotal"
        :page.sync="detailParams.pageNum"
        :limit.sync="detailParams.pageSize"
        @pagination="getDetailList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAiLogList, getAiLogInfo } from "@/api/system/ai";
import { getBuildingFloorList } from "@/api/system/building";
export default {
  name: "AiLog",
  data() {
    return {
      loading: false, // 遮罩层
      total: 0, // 总条数
      dataList: [], // 数据列表
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      detailShow: false, // 显示详情
      floorList: [], // 楼层列表
      detailList: [], // 详情列表
      detailTotal: 0, // 详情总条数
      detailParams: {
        pageNum: 1,
        pageSize: 10,
        id: null, // 日志ID
        floor: null, // 楼层
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询日志列表 */
    getList() {
      this.loading = true;
      getAiLogList(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 导入
    handleImport() {
      this.$router.push({
        path: "/ai-to-lead/ai-to-lead",
      });
    },
    // 获取楼层列表
    getFloors(buildingId) {
      getBuildingFloorList(buildingId).then((res) => {
        this.floorList = res.data;
      });
    },
    /** 查看详情 */
    handleDetail(row) {
      this.detailShow = true;
      this.detailParams.id = row.id;
      this.getFloors(row.buildingId);
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.detailShow = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.detailParams.pageNum = 1;
      this.getDetailList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("detailForm");
      this.handleQuery();
    },
    // 获取详情列表
    getDetailList() {
      getAiLogInfo(this.detailParams).then((res) => {
        this.detailList = res.rows;
        this.detailTotal = res.total;
      });
    },
  },
};
</script>
